<!DOCTYPE html>
<html lang="en" xmlns:th="http://thyneleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="ThemeBucket">
    <link rel="shortcut icon" href="#" type="image/png">

    <title>Mail Compose</title>

    <link rel="stylesheet" type="text/css" href="../js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" />

    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/style-responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.js"></script>
    <script src="../js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="sticky-header">
<div th:replace="/common/header"></div>
    <!-- main content start-->

        <!--body wrapper start-->
        <div class="wrapper" style="min-height: 800px">
            <div class="mail-box">
                <section class="mail-box-info">
                    <header class="header">
                        <div class="btn-toolbar">
                            <h4 class="pull-left">
                                Compose Mail
                            </h4>
                        </div>

                    </header>

                    <section class="mail-list">
                        <div class="compose-mail">
                            <form role="form-horizontal" method="post" action="/Main/sendmail">
                                <div class="form-group">
                                    <label for="to" class="">To:</label>
                                    <input type="text" tabindex="1" id="to" name="to" class="form-control">

                                    <div class="compose-options">
                                        <a onclick="$(this).hide(); $('#cc').parent().removeClass('hidden'); $('#cc').focus();" href="javascript:;">Cc</a>
                                        <a onclick="$(this).hide(); $('#bcc').parent().removeClass('hidden'); $('#bcc').focus();" href="javascript:;">Bcc</a>
                                    </div>
                                </div>

                                <div class="form-group hidden">
                                    <label for="cc" class="">Cc:</label>
                                    <input type="text" tabindex="2" id="cc" class="form-control">
                                </div>

                                <div class="form-group hidden">
                                    <label for="bcc" class="">Bcc:</label>
                                    <input type="text" tabindex="2" id="bcc" class="form-control">
                                </div>

                                <div class="form-group">
                                    <label for="subject" class="" >Subject:</label>
                                    <input type="text" tabindex="1" id="subject" name="subject" class="form-control">
                                </div>

                                <div class="compose-editor">
                                    <textarea class="wysihtml5 form-control" rows="9" id="textcontent" name="textcontent"></textarea>
                                </div>
                                <hr/>
                                <div class="compose-btn">
                                    <button class="btn btn-primary btn-sm"><i class="fa fa-check"></i> Send</button>
                                </div>

                            </form>
                        </div>


                </section>
            </div>

        </div>
        <!--body wrapper end-->

        <!--footer section start-->
        <!--<footer class="sticky-footer">-->
        <!--2014 &copy; AdminEx by ThemeBucket-->
        <!--</footer>-->
        <!--footer section end-->

    <!-- main content end-->
</section>

<!-- Placed js at the end of the document so the pages load faster -->
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery-ui-1.9.2.custom.min.js"></script>
<script src="../js/jquery-migrate-1.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/modernizr.min.js"></script>
<script src="../js/jquery.nicescroll.js"></script>

<script type="text/javascript" src="../js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script type="text/javascript" src="../js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>


<!--common scripts for all pages-->
<script src="../js/scripts.js"></script>

<script>
    jQuery(document).ready(function(){
        $('.wysihtml5').wysihtml5();
    });
</script>
<div th:replace="/common/footer"></div>
</body>
</html>
